<template>
  <div>
    <div class="block">
      <span class="demonstration">页数较少时的效果</span>
      <!-- 
        可以通过current-change事件获取当前页面的页码进行发送请求切换数据
      layout是属于布局的
      pagesize控制每页的显示条数,默认为10,可以直接更改或者使用page-sizes=[]设置多个进行更改,同时layout同样要设置sizes以更改布局
      同时可以使用current-change事件获取当前更改后的pagesize从而重新发请求获取
       -->
      <el-pagination
        layout="prev, pager, next"
        :total="50"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div class="block">
      <span class="demonstration">大于 7 页时的效果</span>
      <el-pagination
        layout="prev, pager, next,sizes"
        :total="1000"
        @size-change="handlePageChange"
        :page-size="5"
        :page-sizes="[10, 20, 30, 40]"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    handlePageChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
